<template>
  <PageContainer>
    <view class="container">
      <Header title="消息" v-model="headerHeight" />
      <view class="messageList" v-if="conversationList.length">
        <TUIConversationList
          :currentID="currrentConversationID"
          :conversationList="conversationList"
          @handleGotoItem="handleCurrrentConversation"
        />
      </view>
      <view v-else :style="`height: calc(100vh - ${headerHeight + 'px'});`" class="disFlxCC">
        <Empty :text="emptyText" />
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import TUIConversationList from './components/conversationList.vue';
  import Empty from '@/components/Empty/Empty.vue';
  import { ref, computed, unref } from 'vue';
  import tim from '../utils';
  import { useImStoreWithOut } from '@/store/modules/im';
  import { onLoad, navigateTo } from '@/router';

  const emptyText = ref('暂无内容');
  const headerHeight = ref(0);

  onLoad(async () => {
    await tim.imLogin();
    uni.hideLoading();
  });

  const useIm = useImStoreWithOut();
  const conversationList = computed(() => {
    return useIm.conversationList.filter((item: any) => {
      return item.type !== '@TIM#SYSTEM'; // 隐藏系统通知
    });
  });

  // 点击事件-进入聊天
  const currrentConversationID = ref<string>('');
  const handleCurrrentConversation = function (value: any) {
    useIm.setConversationItem(value);
    currrentConversationID.value = value.conversationID;
    // 跳转去聊天详情
    navigateTo({ name: 'TUIChat', options: { conversationID: unref(currrentConversationID) } });
  };
</script>

<style lang="scss" scoped>
  .messageList {
    overflow-y: auto;
    background-color: #fff;
  }
</style>
